<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<div th:replace="common/top"></div>
<div id="Content">
    <div id="Login" align="center" >
        <form action="/account/newAccount" method="post" th:object="${newAccount}">
        <fieldset style="width:730px; margin:0px auto" >
            <legend>User Registration</legend>

                <h3>User Information</h3>

                <table align="center">
                    <tr>
                        <td>User ID:</td>
                        <td><input type="text" th:field="*{username}" name="username" id="username" onblur="checkUser()" placeholder="Please enter username"/><img id="isExistInfo" src="../images/white.png" ></td>
                    </tr>
                    <tr>
                        <td>New password:</td>
                        <td><input type="password" th:field="*{password}" name="password" id="password" onblur="getName()" placeholder="Please enter password"/><img id="isRightInfo" src="../images/white.png"></td>
                        <script src="../js/password.js"></script>
                    </tr>
                    <tr>
                        <td>Repeat password:</td>
                        <td><input type="password" name="repeatedPassword" id="confirm" onblur="checkPassword()" placeholder="Repeat password"/><img id="isSameInfo" src="../images/white.png"></td>
                    </tr>

                </table>

                <div th:replace="account/include_account_fields::fields"></div>
                <p>Randcode:<input  id="validation" type="text" name="image" onblur="getCode()" placeholder="Please enter code">
                    <img   id="VerifyCode"  src="pictureCheckCode"  />
                    <input type="button" value="New Code" id="flush">
                    <font color="red"  th:text="${imageMess}"></font>
                    <img id="isTrueInfo" src="../images/white.png">
                    <br>
                </p>
            <br>PhoneNumber:<input id="Number" th:field="*{phonenumber}" name="Number" type="text"  placeholder="Please enter phone number"/>
                <input type="button" value="SendCode" id="SendCode" />
                <script src="../js/sendCode.js"></script>
            <br><br>
               <input type = "text" style="display:none" id="inputCode" name="inputCode" placeholder="Please enter code" onblur="compareCode()"/>
                <img id="isRight" src="../images/white.png">

            <p th:text="${msg}" align="center" th:bgcolor="red"></p>


            <input type="submit" name="newAccount" value="Save Account Information"/>

        </fieldset>
        </form>
        <script>
            var xhr;
            function compareCode(){
                var code = document.getElementById("inputCode").value;
                xhr = new XMLHttpRequest();
                xhr.open("GET","/account/compare?code="+code,true);
                xhr.onreadystatechange = pCode;
                xhr.send(null);
            }
            function pCode(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200) {
                        var responseInfo = xhr.responseText;

                        if(responseInfo == 'T'){
                            document.getElementById("isRight").src =
                                "../images/isExist.png" ;
                        }
                        else if(responseInfo =='F'){
                            document.getElementById("isRight").src =
                                "../images/error.png" ;
                        }
                    }
                }
            }

        </script>

        <script type="text/javascript">

            document.getElementById("flush").onclick = function () {

                document.getElementById("VerifyCode").src =
                    "/account/pictureCheckCode?time=" + new Date().getTime();
            };
        </script>
        <script >
            var xhr;
            function checkUser(){
                var username = document.getElementById("username").value;
                xhr = new XMLHttpRequest();
                xhr.onreadystatechange = processName;
                xhr.open("GET","/account/checkUser?username="+username,true);
                xhr.send(null);
            }

            function processName(){

                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var username = document.getElementById("username").value;
                        var responseInfo = xhr.responseText;
                        if(responseInfo == "Not Exist"&& username !=""){
                            document.getElementById("isExistInfo").src =
                                "../images/isExist.png" ;
                        }
                        else if(responseInfo =="Exist"){
                            document.getElementById("isExistInfo").src =
                                "../images/wronguser.png" ;
                        }

                    }
                }
            }

        </script>


        <script>
            function checkPassword() {
                var password1 = document.getElementById("password").value;
                var password2 = document.getElementById("confirm").value;
                if (password1 == password2 && password1 != "") {

                    document.getElementById("isSameInfo").src =
                        "../images/isExist.png";
                } else {
                    document.getElementById("isSameInfo").src =
                        "../images/error.png";
                }
            }
        </script>
        <script>
            var xhr;
            function getCode(){
                var code = document.getElementById("validation").value;
                xhr = new XMLHttpRequest();
                xhr.open("GET","/account/checkCode?code="+code,true);
                xhr.onreadystatechange = processCode;
                xhr.send(null);
            }
            function processCode(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200) {
                        var responseInfo = xhr.responseText;

                        if(responseInfo == 'T'){
                            document.getElementById("isTrueInfo").src =
                                "../images/isExist.png" ;
                        }
                        else if(responseInfo =='F'){
                            document.getElementById("isTrueInfo").src =
                                "../images/error.png" ;

                        }
                    }
                }
            }

        </script>

    </div>

</div>
<div th:replace="common/bottom"></div>
</body>
</html>